import React from 'react';
import { connect } from 'dva';
import styles from './App.less';
import { Layout, Menu, Icon, Switch, Breadcrumb } from 'antd';
import Menus from '../components/Menus.js';
import config from '../utils/config.js'
const SubMenu = Menu.SubMenu;
const { Header, Footer, Sider, Content } = Layout;

function App({children,app,dispatch}) {
  const {theme,sideCollapse} = app;//获取主题
  // const userName = app.user.name;
  const userName = localStorage.getItem('userName');//获取登录名
  //注销处理
  function logout() {
    dispatch({
      type: 'app/logout'
    });
  }

  //切换主题
  function changeTheme() {
    dispatch({
      type: 'app/changeTheme'
    });
  }
  //收起侧边栏
  function onCollapse(collapsed){
    dispatch({
      type:'app/save',
      payload:{sideCollapse:!sideCollapse}
      // payload:{sideCollapse:collapsed}
    })
  }

  return (
    <Layout style = {{height : '100%'}}>
    <Sider
      style = {{height: '100vh',  background : theme ==='dark' ? '#404040'  : '#FFFFFF' }}
      collapsed={sideCollapse}
      trigger={null}
      // onCollapse={onCollapse}
      collapsible
    >
      <Menus/>
      <div className = {styles.switchForm} key='1'>
        <div style={{position:'absolute',right:10,bottom:10}}>
          <Switch
            // style={{float:'right'}}
            checked={theme === 'dark'}
            onChange={changeTheme}
            checkedChildren="白"
            unCheckedChildren="黑">
          </Switch>
        </div>
      </div>
    </Sider>
      <Layout >
        <Header className = {styles.header}>
          <Icon
            type={sideCollapse ? 'menu-unfold' : 'menu-fold'}
            onClick={onCollapse}
            style={{
              fontSize: '18px',
              lineHeight: '64px',
              padding: '0 16px',
              cursor: 'pointer',
              transition: 'color .3s',
            }}
          />
          <div className={styles.button} key='1'>

          </div>
          <Menu mode="horizontal" onClick={logout} style={{zIndex:1}}>
            <SubMenu style={{
            float: 'right',
            }} title={< span > <Icon type="user" />
                {userName}
             < /span>}
            >
            <Menu.Item key="logout">
              <span><Icon type="poweroff" />注销</span>
            </Menu.Item>
            </SubMenu>
          </Menu>
        </Header>
        <Content style = {{overflow : 'auto'}}>
        <div className={styles.children}>
          <div >
            <Breadcrumb >
              <Breadcrumb.Item href="/">
                <Icon type="home" />
              </Breadcrumb.Item>
              <Breadcrumb.Item href="">
                <Icon type="user" />
                <span>Application List</span>
              </Breadcrumb.Item>
              <Breadcrumb.Item>
                Application
              </Breadcrumb.Item>
            </Breadcrumb>
          </div>
          {children}
        </div>
        </Content>
        <Footer className = {styles.footer}>
          蓝海股份 版权所有 © 2017 由 战略发展部 提供支持
        </Footer>
      </Layout>
    </Layout>
  );
}

const mapStateToProps= (state)=>{
  let {app} = state;
  return {app}
}

export default connect (mapStateToProps)(App);
